<template>
  <div class="container">
      <nav>
        <ul>
          <li>Home</li>
          <li>Services</li>
          <li>Products</li>
          <li>Client</li>
          <li>Contact</li>
        </ul>
      </nav>
  </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    components:{

    },
    watch:{

    },
    computed:{

    },
    created() {

    },
    mounted() {

    },
    methods: {
        
    }
}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
  font-family: "Poppins",sans-serif;
}
.container {
  background-color: #ffbdc9;
  // width: 450px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  nav {
    background-color: #fff;
    border-radius: 50px;
    padding: 10px;
    box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.4);
  }
  nav ul li {
    list-style: none;
    display: inline-block;
    padding: 13px 35px;
    margin: 10px;
    // border: 1px solid red;
    font-size: 18px;
    color: #777;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.5s;
  }
  nav ul li::after {
    content: "";
    background-color: #f44566;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    opacity: 0;
    transition: top 0.5s,opacity 0.5s;
  }
  nav ul li:hover {
    color: #fff;
  }
   nav ul li:hover::after {
    top: 50%;
    opacity: 1;
  }

}
</style>